<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>存款目标计算器</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input[type="number"], select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .result {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 4px;
            display: none;
        }
        .result h2 {
            margin-top: 0;
            color: #2c3e50;
        }
        .highlight {
            font-size: 24px;
            color: #e74c3c;
            font-weight: bold;
        }
        .explanation {
            margin-top: 20px;
        }
        .input-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        @media (max-width: 600px) {
            .input-section {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>存款目标计算器</h1>

        <div class="input-section">
            <div class="form-group">
                <label for="targetAmount">存款目标金额 (元)</label>
                <input type="number" id="targetAmount" min="0" step="100" value="1000000">
            </div>

            <div class="form-group">
                <label for="currentAmount">当前已存金额 (元)</label>
                <input type="number" id="currentAmount" min="0" step="100" value="100000">
            </div>

            <div class="form-group">
                <label for="monthlyDeposit">每月存款金额 (元)</label>
                <input type="number" id="monthlyDeposit" min="0" step="100" value="5000">
            </div>

            <div class="form-group">
                <label for="annualRate">预计年利率 (%)</label>
                <input type="number" id="annualRate" min="0" max="100" step="0.1" value="3.5">
            </div>

            <div class="form-group">
                <label for="years">目标时间 (年)</label>
                <input type="number" id="years" min="1" step="1" value="10">
            </div>

            <div class="form-group">
                <label for="compoundMethod">复利计算方式</label>
                <select id="compoundMethod">
                    <option value="monthly">按月复利</option>
                    <option value="yearly">按年复利</option>
                </select>
            </div>

            <div class="form-group">
                <label for="inflationRate">预计通货膨胀率 (%)</label>
                <input type="number" id="inflationRate" min="0" max="100" step="0.1" value="2">
            </div>
        </div>

        <button id="calculateBtn">计算存款计划</button>

        <div class="result" id="result">
            <h2>计算结果</h2>
            <p>要达到 <span id="resultTargetAmount" class="highlight"></span> 元的存款目标：</p>
            <p>在 <span id="resultYears" class="highlight"></span> 年后，</p>
            <p>您的存款总额将达到 <span id="resultFutureValue" class="highlight"></span> 元</p>
            <p>考虑通货膨胀后，相当于现在的 <span id="resultRealValue" class="highlight"></span> 元</p>

            <div class="explanation">
                <p><strong>说明：</strong></p>
                <p>1. 计算结果基于您输入的参数和复利计算公式</p>
                <p>2. 实际收益可能因利率波动、税收等因素而有所不同</p>
                <p>3. 通货膨胀调整后的价值可以帮助您了解资金的实际购买力</p>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('calculateBtn').addEventListener('click', function() {
            // 获取输入值
            const targetAmount = parseFloat(document.getElementById('targetAmount').value);
            const currentAmount = parseFloat(document.getElementById('currentAmount').value);
            const monthlyDeposit = parseFloat(document.getElementById('monthlyDeposit').value);
            const annualRate = parseFloat(document.getElementById('annualRate').value) / 100;
            const years = parseInt(document.getElementById('years').value);
            const compoundMethod = document.getElementById('compoundMethod').value;
            const inflationRate = parseFloat(document.getElementById('inflationRate').value) / 100;

            // 计算未来值
            let futureValue;
            if (compoundMethod === 'monthly') {
                // 按月复利计算
                const monthlyRate = annualRate / 12;
                const months = years * 12;

                // 未来值 = 当前金额*(1+月利率)^月数 + 每月存款*[(1+月利率)^月数 - 1]/月利率
                futureValue = currentAmount * Math.pow(1 + monthlyRate, months) +
                              monthlyDeposit * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate;
            } else {
                // 按年复利计算
                futureValue = currentAmount * Math.pow(1 + annualRate, years);

                // 计算每年存款的未来值
                for (let i = 1; i <= years; i++) {
                    futureValue += monthlyDeposit * 12 * Math.pow(1 + annualRate, years - i);
                }
            }

            // 计算考虑通货膨胀后的实际价值
            const realValue = futureValue / Math.pow(1 + inflationRate, years);

            // 显示结果
            document.getElementById('resultTargetAmount').textContent = targetAmount.toLocaleString();
            document.getElementById('resultYears').textContent = years;
            document.getElementById('resultFutureValue').textContent = Math.round(futureValue).toLocaleString();
            document.getElementById('resultRealValue').textContent = Math.round(realValue).toLocaleString();

            // 显示结果区域
            document.getElementById('result').style.display = 'block';
        });
    </script>
</body>
</html>